<ui:composition template="/WEB-INF/template/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="main">
		<div class="jumbotron" style="margin-bottom: 50px;">
			<h1 style="margin-bottom: 30px;">Editar Perfil</h1>
			<h:form class="form-horizontal" role="form" method="post">
				<div class="form-group">
					<label for="nome" class="col-sm-1 control-label"
						style="text-align: left;">Nome:</label>
					<div class="col-sm-6">
						<h:inputText class="form-control" id="nome" required="true"
							requiredMessage="O campo nome deve ser preenchido"
							value="#{usuarioBean.usuario.nome}" />
					</div>
					<label for="email" class="col-sm-1 control-label"
						style="text-align: left;">Email:</label>
					<div class="col-sm-4">
						<h:inputText class="form-control" id="email" required="true"
							requiredMessage="O campo email deve ser preenchido"
							value="#{usuarioBean.usuario.email}" />
					</div>
				</div>
				<div class="form-group">
					<label for="instituicao" class="col-sm-1 control-label"
						style="text-align: left;">Instituição:</label>
					<div class="col-sm-5">
						<h:inputText class="form-control" id="instituicao"
							value="#{usuarioBean.usuario.instituicao}" />
					</div>
					<label for="rua" class="col-sm-1 control-label"
						style="text-align: left;">Rua:</label>
					<div class="col-sm-5">
						<h:inputText class="form-control" id="rua"
							value="#{usuarioBean.usuario.rua}" />
					</div>
				</div>
				<div class="form-group">
					<label for="bairro" class="col-sm-1 control-label"
						style="text-align: left;">Bairro:</label>
					<div class="col-sm-3">
						<h:inputText class="form-control" id="bairro"
							value="#{usuarioBean.usuario.bairro}" />
					</div>
					<label for="numero" class="col-sm-1 control-label"
						style="text-align: left;">Número:</label>
					<div class="col-sm-1">
						<h:inputText class="form-control" id="numero"
							value="#{usuarioBean.usuario.numero}" />
					</div>
					<label for="cidade" class="col-sm-1 control-label"
						style="text-align: left;">Cidade:</label>
					<div class="col-sm-3">
						<h:inputText class="form-control" id="cidade"
							value="#{usuarioBean.usuario.cidade}" />
					</div>
					<label for="uf" class="col-sm-1 control-label"
						style="text-align: left;">UF:</label>
					<div class="col-sm-1">
						<h:inputText class="form-control" id="uf"
							value="#{usuarioBean.usuario.uf}" />
					</div>
				</div>
				<div class="form-group">
					<label for="fone" class="col-sm-1 control-label"
						style="text-align: left;">Fone:</label>
					<div class="col-sm-2">
						<h:inputText class="form-control" id="fone"
							value="#{usuarioBean.usuario.fone}" />
					</div>
					<label for="sexo" class="col-sm-1 control-label"
						style="text-align: left;">Sexo:</label>
					<div class="col-sm-2">
						<h:selectOneMenu class="form-control"
							style="padding-bottom:8px; margin-bottom:10px;"
							value="#{usuarioBean.usuario.sexo}" id="sexo">
							<f:selectItem itemValue="M" itemLabel="Masculino" />
							<f:selectItem itemValue="F" itemLabel="Feminino" />
						</h:selectOneMenu>
					</div>
				</div>
				<h:inputHidden value="#{usuarioBean.usuario.id}" />
				<h:panelGrid columns="2">
					<h:commandButton class="btn btn-primary" value="Editar"
						style="padding-left:40px; padding-right:40px; font-size:16px;"
						action="#{usuarioBean.alterarDados}" />
					<a style="padding: 3px; margin-left: 20px; font-size: 16px;"
						data-toggle="modal" href="#modalLocal">Alterar Senha</a>
				</h:panelGrid>

			</h:form>

			<div class="modal fade" id="modalLocal" tabindex="-1" role="dialog"
				aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">Seven</button>
							<h4 class="modal-title">Alterar senha!</h4>
						</div>
						<h:form>
							<div class="modal-body">
								<h:panelGrid columns="2">
									<h:outputLabel value="Senha antiga" for="senha_antiga" />
									<p:password value="#{usuarioBean.usuario.senha}"
										id="senha_antiga" required="true" style="margin-left:10px;"
										requiredMessage="Preencha do campo Senha Antiga" />
									<h:outputLabel value="Nova Senha" for="senha_nova" style="margin-top:15px;"/>
									<p:password match="pwd2" value="#{usuarioBean.novaSenha}"
										id="senha_nova" required="true" style="margin-top:15px; margin-left:10px;"
										requiredMessage="Preencha do campo Nova Senha"
										validatorMessage="Senhas inválidas" />
									<h:outputLabel for="pwd2" value="Confirmação de senha" style="margin-top:15px;"/>
									<p:password id="pwd2" value="#{usuarioBean.novaSenha}"
										label="Confirmação de Senha" required="true" style="margin-top:15px; margin-left:10px;"
										requiredMessage="Preencha do campo Confirmação de Senha" />
								</h:panelGrid>

							</div>
							<div class="modal-footer">
								<h:commandButton class="btn btn-primary" value="Confimar"
									onclick="return:confirm('Confirmação')"
									action="#{usuarioBean.alterarSenha}" />
								<button type="button" class="btn btn-default"
									data-dismiss="modal">Fechar</button>
							</div>
						</h:form>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>

			<p:dialog header="Alterar Senha" widgetVar="dlg" modal="true"
				width="450" resizable="false">
				<h:form>
					<h:panelGrid columns="2">

						<h:outputLabel value="Senha antiga" for="senha_antiga" />
						<p:password value="#{usuarioBean.usuario.senha}" id="senha_antiga"
							required="true" requiredMessage="Preencha do campo Senha Antiga" />
						<h:outputLabel value="Nova Senha" for="senha_nova" />
						<p:password match="pwd2" value="#{usuarioBean.novaSenha}"
							id="senha_nova" required="true"
							requiredMessage="Preencha do campo Nova Senha"
							validatorMessage="Senhas inválidas" />
						<h:outputLabel for="pwd2" value="Confirmação de senha" />
						<p:password id="pwd2" value="#{usuarioBean.novaSenha}"
							label="Confirmação de Senha" required="true"
							requiredMessage="Preencha do campo Confirmação de Senha" />
					</h:panelGrid>
					<h:commandButton class="btn btn-primary" value="Confimar"
						onclick="return:confirm('Confirmação')"
						action="#{usuarioBean.alterarSenha}" />
				</h:form>
			</p:dialog>

		</div>
	</ui:define>

</ui:composition>